<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>index page</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="./css/common.css" />
<script src="./js/jquery-1.7.js"></script>
<script src="./js/common.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.core.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.widget.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.datepicker.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.mouse.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.button.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.draggable.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.position.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.resizable.js"></script>
<script src="./js/jquery_ui/ui/jquery.ui.dialog.js"></script>
<script src="./js/jquery_ui/ui/jquery.effects.core.js"></script>
<script>
	var curSection;// current section div to pass to the webserviceform
	var sectionNum = 1;
	var mainformAction = "BAIGenerator?sectionNum=";
	$(function() {
	
		addTipRect("typeA");
		
		addResetHandler();
		addCloseHandler();
		
		$("#webserviceform").dialog({
			autoOpen : false,
			height : 330,
			width : 500,
			modal : true,
			buttons : {
				"OK" : function() {
					
					if($("#clientTransactionId").val()=="") {
						
						$("#validateTips").css("color","red").text("ClientTransactionId can not be empty!");
						return false;
					}else if($("#accountId").val()==""||!check_num($("#accountId").val())){
						$("#validateTips").css("color","red").text("AccountId must be valid integer!");
						return false;
					}else if($("#webs_amount").val()==""||!check_decimal($("#webs_amount").val())){
						$("#validateTips").css("color","red").text("Amount must be valid decimal!");
						return false;
					}
					
					$("#validateTips").css("color","#000").text("All fields are required.");

					
					var typeVal;
					if($(curSection).hasClass("TemplateA")) {
						typeVal = "TemplateA";
					}
					else if($(curSection).hasClass("TemplateB")) {
						typeVal = "TemplateB";
					}
					else if($(curSection).hasClass("TemplateC")) {
						typeVal = "TemplateC";
					}
					
					$.get("GetWebServiceInfo", {"type":typeVal,"clientTransactioId":$("#clientTransactionId").val(),"webs_amount":$("#webs_amount").val(),"accountId":$("#accountId").val()}, function (data){
					
						var data = data.toString();
						var $items = data.split("&");
						var amount;
						var epn;
						var bn;
						var bban;
						var iban;
						$.each($items, function(k, n) {
							if(n.indexOf("amount")!=-1) {//amount
								amount = n.substring(n.indexOf("=")+1);
							}
							else if(n.indexOf("epn")!=-1) {//epn
								epn = n.substring(n.indexOf("=")+1);
							}
							else if(n.indexOf("bn")!=-1) {//bn
								bn = n.substring(n.indexOf("=")+1);
							}
							else if(n.indexOf("bban")!=-1) {//bban
								bban = n.substring(n.indexOf("=")+1);
							}
							else if(n.indexOf("iban")!=-1) {//iban
								iban = n.substring(n.indexOf("=")+1);
							}
						});
						
						$("#webserviceform").dialog("close");
						
						$(curSection).find(".error").hide();
						
						var rows = $(curSection).find('.row');
						$.each(rows, function(i, n) {
							$($(n).children('.amount')[0]).val(amount);
							$($(n).children('.epn')[0]).val(epn);
							$($(n).children('.bn')[0]).val(bn);
							$($(n).children('.van_bban')[0]).val(bban);
							$($(n).children('.van_iban')[0]).val(iban);
						});
						//$(curSection).effect( "bounce", {}, 600, function(){});
						
						var $temp = $(curSection);
						var t = setTimeout(function(){
							$temp.css("border", "2px solid #99e600");
							setTimeout(function(){
								$temp.css("border", "1px solid #ccc");
							},
							600);
						}, 100);
						
					},"text");
					
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			},
			close : function() {
				//alert("close");
			}
		});

		$(".getInfoBt").button().click(function() {
			var now = new Date();
			$("#clientTransactionId").val("pgwtest"+now.getTime());
			$("#webs_amount").val("");
			$("#accountId").val("");
			$("#webserviceform").dialog("open");
			curSection = $(this).parent().parent();
		});
		$(".getInfoBt").removeClass(
				'ui-button ui-widget ui-state-default ui-corner-all');
	});
</script>

</head>
<body>
	<div id="header">
		<div class="logo">
			<img alt="logo" src="./img/logo.gif">
		</div>
	</div>
	
	<!-- tool tip rect -->
	<div class="text-magnifier fn-hide" id="textMag">
			<div id="mag-text" class="mag-text"></div>
	</div>
	
	<div class="container">
		<button id="addA" class="add" name="typeA">Add Old Section</button>
		<button id="addB" class="add" name="typeB">Add BBAN Section</button>
		<button id="addC" class="add" name="typeC">Add IBAN Section</button>

		<div id="webserviceform" title="Call Web Service">
			<p id="validateTips">All fields are required.</p>
			<fieldset>
				<label for="clientTransactionId" class="dialog_label">ClientTransactionId</label>
				<input type="text" name="clientTransactionId"
					id="clientTransactionId" />
					 <label for="accountId"
					class="dialog_label">AccountId</label> <input type="text"
					name="accountId" id="accountId" />
					 <label for="webs_amount"
					class="dialog_label">Amount</label> <input type="text"
					name="webs_amount" id="webs_amount" />
			</fieldset>

		</div>

		<form id="mainform" method="post"  onsubmit="return check_form();"
			action="BAIGenerator?sectionNum=1">
			<div class="datediv">
				<label class="datelabel">Date</label> <input id="date" type="text"
					name="date" />
			</div>
			<div class="timediv">
				<label class="timelabel">Time</label><input id="time" type="text"
					name="time" />
			</div>

			<div class="clearDiv"></div>

			<div class="section TemplateA">
				<div class="typeLabelDiv">
					<label>Old Section</label>
				</div>
				<a href="#" class="closeIcon"><span>x</span> </a>
				<div class="row">
					<label class="fieldlabel">Amount</label> <input type="text"
						name="amount_0" class="field amount" /><label 
						class="error amount_error">Amount must be positive decimal!</label>
				</div>
				<div class="row">
					<label class="fieldlabel">EPN</label> 
					<input type="text" name="epn_0"
						 class="field epn" maxlength="14" /><label 
						class="error epn_error">
						This field must not be empty!
					</label>
		
				</div>
				<div class="row">
					<label class="fieldlabel" title="Beneficial Name">BN</label> <input
						type="text" name="bn_0" class="field bn"  maxlength="16" /><label
						 class="error bn_error">This field must not be empty!</label>
				
				</div>
				<div class="row btrow">
					<input type="button" class="getInfoBt" value="Get Info From API" />
					<input type="button" class="resetInfoBt" value="Reset" />
				</div>
			</div><!-- End of Section -->

			<div class="submitRow">
				<input type="submit" name="Submit" class="submitBt"
					value="Generate BAI File" /> <input type="reset" name="reset"
					id="resetBt" value="Reset All" />
			</div>
		</form>
	</div><!-- End of Container -->
	
	
		
		<!-- The three section div templates -->
	<div class="section template TemplateA">
				<div class="typeLabelDiv">
					<label>Old Section</label>
				</div>
				<a href="#" class="closeIcon"><span>x</span> </a>
				<div class="row">
					<label class="fieldlabel">Amount</label> <input type="text"
						name="amount" class="field amount" /><label id="amount_error"
						class="error">Amount must be positive decimal!</label>
				</div>
				<div class="row">
					<label class="fieldlabel">EPN</label> <input type="text" name="epn"
						 class="field epn" maxlength="14" /><label id="epn_error"
						class="error">This field must not be empty!</label>
				
				</div>
				<div class="row">
					<label class="fieldlabel" title="Beneficial Name">BN</label> <input
						type="text" name="bn" class="field bn"  maxlength="16" /><label
						class="error bn_error">This field must not be empty!</label>
					
				</div>
				<div class="row btrow">
					<input type="button" class="getInfoBt" value="Get Info From API" />
					<input type="button" class="resetInfoBt" value="Reset" />
				</div>
	</div>
	
	<div class="section template TemplateB">
				<div class="typeLabelDiv">
					<label>BBAN Section</label>
				</div>
				<a href="#" class="closeIcon"><span>x</span> </a>
				<div class="row">
					<label class="fieldlabel">Amount</label> <input type="text"
						name="amount" class="field amount" /><label 
						class="error amount_error">Amount must be positive decimal!</label>
				</div>
				<div class="row">
					<label class="fieldlabel">EPN</label> <input type="text" name="epn"
						 class="field epn" maxlength="14" /><label 
						class="error epn_error">This field must not be empty!</label>
					
				</div>

				<div class="row">
					<label class="fieldlabel">VAN-BBAN</label> <input type="text"
						name="bban" class="field van_bban" /><label 
						class="error van_bban_error">This field must not be empty!</label>
				</div>

				<div class="row">
					<label class="fieldlabel" title="Beneficial Name">BN</label> <input
						type="text" name="bn" class="field"  maxlength="4" value="EBAY" /><label
						 class="error bn_error">This field must not be empty!</label>
				
				</div>

				<div class="row btrow">
					<input type="button" class="getInfoBt" value="Get Info From API" />
					<input type="button" class="resetInfoBt" value="Reset" />
				</div>
	</div><!-- END TAG OF SECTION -->
	
	<div class="section template TemplateC">
				<div class="typeLabelDiv">
					<label>IBAN Section</label>
				</div>
				<a href="#" class="closeIcon"><span>x</span> </a>
				<div class="row">
					<label class="fieldlabel">Amount</label> <input type="text"
						name="amount" class="field amount" /><label 
						class="error amount_error">Amount must be positive decimal!</label>
				</div>
				<div class="row">
					<label class="fieldlabel">EPN</label> <input type="text" name="epn"
						 class="field epn" maxlength="14" /><label 
						class="error epn_error">This field must not be empty!</label>
					
				</div>

				<div class="row">
					<label class="fieldlabel">VAN-IBAN</label> <input type="text"
						name="iban" class="field van_iban" /><label 
						class="error van_iban_error">This field must not be empty!</label>
				</div>

				<div class="row">
					<label class="fieldlabel" title="Beneficial Name">BN</label> <input
						type="text" name="bn" class="field"  value="EBAY"
						maxlength="4" /><label  class="error bn_error">This
						field must not be empty!</label>
				</div>

				<div class="row btrow">
					<input type="button" class="getInfoBt" value="Get Info From API" />
					<input type="button" class="resetInfoBt" value="Reset" />
				</div>
		</div><!-- END TAG OF SECTION -->
</body>
</html>